﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">

    <!-- ========== SEO ========== -->
    <title>Single Room</title>
    <meta content="" name="description">
    <meta content="" name="keywords">
    <meta content="" name="author">

    <!-- ========== FAVICON ========== -->
    <link rel="apple-touch-icon-precomposed" href="/static/app/images/favicon-apple.png" />
    <link rel="icon" href="/static/app/images/favicon.png">

    <!-- ========== STYLESHEETS ========== -->
    <link href="/static/app/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <link href="/static/app/revolution/css/layers.css" rel="stylesheet" type="text/css" />
    <link href="/static/app/revolution/css/settings.css" rel="stylesheet" type="text/css" />
    <link href="/static/app/revolution/css/navigation.css" rel="stylesheet" type="text/css" />
    <link href="/static/app/css/bootstrap-select.min.css" rel="stylesheet" type="text/css">
    <link href="/static/app/css/animate.min.css" rel="stylesheet" type="text/css">
    <link href="/static/app/css/famfamfam-flags.css" rel="stylesheet" type="text/css">
    <link href="/static/app/css/magnific-popup.css" rel="stylesheet" type="text/css">
    <link href="/static/app/css/owl.carousel.min.css" rel="stylesheet" type="text/css">
    <link href="/static/app/css/style.css" rel="stylesheet" type="text/css">
    <link href="/static/app/css/responsive.css" rel="stylesheet" type="text/css">

    <!-- ========== ICON FONTS ========== -->
    <link href="/static/app/fonts/font-awesome.min.css" rel="stylesheet">
    <link href="/static/app/fonts/flaticon.css" rel="stylesheet">

    <!-- ========== GOOGLE FONTS ========== -->
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900%7cRaleway:400,500,600,700" rel="stylesheet">

    <link href="/static/admin/assets/css/toastr.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <div id="smoothpage" class="wrapper">


        <!-- ========== HEADER ========== -->
        <header class="fixed transparent">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle mobile_menu_btn" data-toggle="collapse" data-target=".mobile_menu" aria-expanded="false">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand light" href="index.html">
                        <img src="/static/app/images/logo_light.svg" height="32" alt="Logo">
                    </a>
                    <a class="navbar-brand dark nodisplay" href="index.html">
                        <img src="/static/app/images/logo.svg" height="32" alt="Logo">
                    </a>
                </div>
                <nav id="main_menu" class="mobile_menu navbar-collapse">
                    <ul class="nav navbar-nav">
                        {if $Think.session.vip}
                        <li><a href="">{$Think.session.vip.name}</a></li>
                        <li><a href="{:url('app/index/logout')}">退出</a></li>
                        {else /}
                        <li><a href="{:url('app/Index/login')}">登录</a></li>
                        <li><a href="{:url('app/Index/update')}">注册</a></li>
                        {/if}
                        <li><a href="room.html">个人中心</a></li>
                        <!-- <li><a href="rooms-list.html">LIST</a></li>
                        <li><a href="contact.html">CONTACT US</a></li>
                        <li><a href="blog.html">BLOG</a></li> -->
                    </ul>
                </nav>
            </div>
        </header>

        <!-- =========== PAGE TITLE ========== -->
        <div class="page_title gradient_overlay" style="background: url(images/page_title_bg.jpg);">
            <div class="container">
                <div class="inner">
                    <div class="row">
                        <div class="col-md-6 col-sm-6">
                            <ol class="breadcrumb">
                                <li><a href="index.html">首页</a></li>
                                <li>{$data.type}</li>
                            </ol>
                        </div>
                        <div class="col-md-6 col-sm-6">
                            <div class="price">
                                <div class="inner" style="font-size: 15px;">
                                    ¥{$data.price} <span>每晚</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- =========== MAIN ========== -->
        <main id="room_page">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <div class="sidebar">
                            <aside class="widget">
                                <div class="vbf">
                                    <h2 class="form_title"><i class="fa fa-calendar"></i> 网上预定</h2>
                                    <form class="inner" action="{:url('app/Index/order')}" method="post">
                                        <div class="form-group">
                                            <input class="form-control" name="name" placeholder="请填写你的名字" type="text" required=" ">
                                        </div>
                                        <div class="form-group">
                                            <input class="form-control" name="tel" placeholder="请填写你的联系电话" type="text" required=" ">
                                        </div>
                                        <div class="form-group col-md-6 col-sm-6 col-xs-12 nopadding">
                                            <div class="input-group">
                                                <div class="form_date">
                                                    <input class="datepicker form-control md_noborder_right" name="checkin" placeholder="入住时间" type="text" required=" ">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group col-md-6 col-sm-6 col-xs-12 nopadding">
                                            <div class="input-group">
                                                <div class="form_date">
                                                    <input class="datepicker form-control" name="checkout" placeholder="离开时间" type="text" required=" ">
                                                </div>
                                            </div>
                                        </div>
                                        <button class="button btn_lg btn_blue btn_full order-btn" type="submit">现在预定房间</button>
                                    </form>
                                </div>
                            </aside>
                        </div>
                    </div>
                </div>
            </div>
        </main>

    <!-- ========== BACK TO TOP ========== -->
    <div id="back_to_top">
        <i class="fa fa-angle-up" aria-hidden="true"></i>
    </div>

    <!-- ========== NOTIFICATION ========== -->
    <div id="notification"></div>

    <!-- ========== JAVASCRIPT ========== -->
    <script type="text/javascript" src="/static/admin/assets/js/jquery.min.js"></script>
    <script type="text/javascript" src="/static/admin/assets/js/toastr.min.js"></script>

    <!--<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=AIzaSyBDgMJEPio2qomUKV1iqlIufj4u2NVd3q4"></script>-->
    <script type="text/javascript" src="/static/app/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="/static/app/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="/static/app/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="/static/app/js/jquery.smoothState.js"></script>
    <script type="text/javascript" src="/static/app/js/moment.min.js"></script>
    <script type="text/javascript" src="/static/app/js/morphext.min.js"></script>
    <script type="text/javascript" src="/static/app/js/wow.min.js"></script>
    <script type="text/javascript" src="/static/app/js/jquery.easing.min.js"></script>
    <script type="text/javascript" src="/static/app/js/owl.carousel.min.js"></script>
    <script type="text/javascript" src="/static/app/js/owl.carousel.thumbs.min.js"></script>
    <script type="text/javascript" src="/static/app/js/jquery.magnific-popup.min.js"></script>
    <script type="text/javascript" src="/static/app/js/jPushMenu.js"></script>
    <script type="text/javascript" src="/static/app/js/isotope.pkgd.min.js"></script>
    <script type="text/javascript" src="/static/app/js/countUp.min.js"></script>
    <script type="text/javascript" src="/static/app/js/jquery.countdown.min.js"></script>
    <script type="text/javascript" src="/static/app/js/main.js"></script>
<script>
    // $(function () {
    //     // 设置弹框参数
    //     toastr.options = {
    //         closeButton: true,// 是否显示关闭按钮
    //         progressBar: true,// 实现显示计时条
    //         timeOut: "3000",  // 自动关闭时间
    //         positionClass: "toast-bottom-left" // 提示位置
    //         // toast-top-full-width 顶端，宽度铺满整个屏幕
    //         // toast-top-right  顶端右边
    //     };

    //     // 触发添加订单
    //     $('.order-btn').click(function () {
    //         var data = $('#myinput input').serialize();
    //         // console.log(data);
    //         addOrder(data);
    //     });
    // });


    // // 执行AJAX添加
    // function addOrder(data) {
    //     // console.log(data);
    //     $.ajax({
    //         type: 'post',
    //         url: '/app/order/',
    //         dataType: 'json',
    //         data: data,
    //         success: function (data) {
    //             alert('下单成功');
    //             // console.log(data);
    //             if (data.status) {
    //                 toastr.success(data.info);
    //             } else {
    //                 toastr.error(data.info, 'FBI WARING:');
    //             }
    //         },
    //         error: function () {
    //             alert('ajax错误');
    //         }
    //     });
        
    // }
</script>
</body>

</html>
